<template>
	<div class="redianciyun">
		<div class="redian" v-if="$store.state.denglu">
			<div class="redian1">
				<span>创意精选</span>
			</div>
			
			<div class="zhongcaoxuan">
				<ul>
					<li v-for="(item,index) in zhongcao" :key="index">
						{{item.name}}
					</li>
				</ul>
			</div>
			
			<div class="caoshipin">
				<div class="xiangshipin1" v-for="(item,index) in 16" :key="index">
					<div class="xiangshi1">
						<img src="../../../assets/img/shuyan.png" />
					</div>
					<div class="xiangshi2">
						一直流浪狗狗的前半生。#领样代替购买
					</div>
					<div class="xiangshi4">
						<div class="xiangshi4_1">
							<img src="../../../assets/img/datou.png" />
							<span>CN棍哥的温柔香GB</span>
						</div>
						<div class="xiangshi4_2">
							<img src="../../../assets/img/dianzan3.png" />
							<span>{{fen | guolv}}</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="fenye" style="text-align: center;">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :hide-on-single-page="yindi"
				  :current-page="currentPage4"
				  :page-sizes="[100, 200, 300, 400]"
				  :page-size="100"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="4001">
				</el-pagination>
			</div>
			
		</div>
		
		<jinzhi :wenben="wenben" v-else></jinzhi>
		
	</div>
</template>

<script>
	import jinzhi from "@/components/components/jinzhiye.vue"
	export default{
		name:"chuangyijingxuan",
		components:{
			jinzhi
		},
		data(){
			return{
				wenben:'精选各类带货视频，学习各类套路，带货路上快人一步',
				fen:123234,
				zhongcao:[
					{name:"种草视频精选"},{name:"摆拍视频精选"},{name:"测评视频精选"},{name:"剧情视频精选"},{name:"街拍视频精选"},{name:"书单视频精选"}
				],
				
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			$(".zhongcaoxuan ul li").click(function(){
				$(this).css({
					"background-color": '#0091FF',
					"color": '#fff',
					"font-size": '0.4rem'
				})
				$(this).siblings().css({
					"background-color": '#fff',
					"color": '#666'
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.redianciyun{
		.redian{
			
			.redian1{
				height: 100%;
				box-sizing: border-box;
				position: relative;
				
				span{
					font-size: 0.7rem;
					display: block;
					margin-left:0.8rem ;
					color: #333333;
					letter-spacing: 0.05rem;
				}
				
				span::before{
					content: "";
					display: block;
					position: absolute;
					left: 0;
					width: 0.3rem;
					height: 1rem;
					background-color: #0091FF;
				}
			}
			
			.zhongcaoxuan{
				position: sticky;
				margin:1rem 0 ;
				background-color: #fff;
				padding: 0.4rem 0;
				border-radius:0.1rem ;
				
				ul{
					list-style: none;
					
					li{
						cursor: pointer;
						border-radius:0.05rem ;
						float: left;
						color: #666666;
						font-size: 0.4rem;
						text-align: center;
						padding: 0.2rem 0.3rem;
						letter-spacing: 0.05rem;
						box-sizing: border-box;
						margin-left:0.7rem ;
					}
					li:nth-of-type(1){
						background-color: #0091FF;
						color: #fff;
					}
				}
				ul::after{
					content: "";
					display: block;
					clear: both;
				}
			}
			
			.caoshipin{
				margin-top:1rem ;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				
				.xiangshipin1{
					cursor: pointer;
					width: 23.5%;
					margin-bottom:1rem ;
					padding-bottom:0.6rem ;
					background-color: #fff;
					box-shadow: 0 0 0.2rem rgba(0,0,0,0.2rem);
					
					.xiangshi1{
						img{
							width: 100%;
						}
					}
					.xiangshi2{
						padding:0 0.8rem ;
						padding-top:0.6rem ;
						color: #333333;
						font-size: 0.4rem;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					.xiangshi4{
						padding:0 0.8rem ;
						padding-top:0.6rem ;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.xiangshi4_1{
							display: flex;
							justify-content: space-between;
							align-items: center;
							img{
								width: 0.6rem;
								vertical-align: middle;
							}
							span{
								width: 4rem;
								margin-top:0.1rem ;
								display: block;
								margin-left:0.2rem ;
								color: #333333;
								font-size: 0.35rem;
								
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
						}
						.xiangshi4_2{
							display: flex;
							justify-content: space-between;
							align-items: center;
							img{
								width: 0.4rem;
								vertical-align: middle;
							}
							span{
								display: block;
								margin-left:0.2rem ;
								color: #999999;
								font-size: 0.35rem;
							}
						}
					}
				}
			}
		}
	}
</style>
<style  lang="scss">
	.el-submenu .el-menu-item {
	    height: 50px;
	    line-height: 50px;
	    padding: 0 0;
	    min-width: 1rem;
	}
</style>
